<template>
  <div>
    <el-dialog
      :visible.sync="visible"
      width="640px"
      @open="handleOpen"
      @close="handleClose"
    >
      <div slot="title">录音列表</div>
      <!-- {{ tempData }} -->
      <!-- {{ tempList }} -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="来自IM电话系统的录音" name="scrm">
          <PhoneFormScrm
            ref="scrm"
            :useList="useList"
            :tempData="tempData"
            :tempList="tempList"
          >
          </PhoneFormScrm>
        </el-tab-pane>
        <el-tab-pane label="来自微信的电话录音" name="wx">
          <PhoneFormWx
            ref="wx"
            :useList="useList"
            :tempData="tempData"
            :tempList="tempList"
          ></PhoneFormWx>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancel()">关闭</el-button>
      </span>
      <audio ref="audio" autoplay="autoplay" :src="tempUrl"></audio>
    </el-dialog>
    <!-- prettier-ignore -->
  </div>
</template>

<script>
import { bus } from '@/main.js';

export default {
  name: 'checkTheTapeList', //查看录音列表
  components: {
    PhoneFormScrm: () => {
      return import('./查看录音/来自scrm的录音.vue');
    },
    PhoneFormWx: () => {
      return import('./查看录音/来自wx的录音.vue');
    },
  },
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',
      tempData: null,
      tempList: [],
      useList: false,
      visible: false,
      activeName: 'scrm',
      tempUrl: '',
    };
  },
  computed: {},
  methods: {
    init: function(tempDate) {
      this.visible = true;
      this.tempData = tempDate;
      // this.$nextTick(() => {
      //   this.ajaxData();
      // });
    },
    handleClick: function(tab) {
      tab.$children[0].ajaxData();
    },
    handleOpen: function() {
      this.$nextTick(() => {
        this.$refs['scrm'].ajaxData();
      });
    },
    handleClose: function() {
      this.activeName = 'scrm';
      this.tempData = null;
      this.tempList = [];
      this.tempUrl = '';
      this.$refs['scrm'].clearTable();
      this.$refs['scrm'].page.total = 0;
      this.$refs['wx'].clearTable();
      this.$refs['wx'].page.total = 0;
      bus.$emit('录音stop', {});
    },

    cancel: function() {
      this.tempData = null;
      this.tempList = [];
      this.tempUrl = '';
      this.visible = false;
    },
  },
  mounted: function() {
    bus.$on('查看录音', e => {
      this.visible = true;
      // this.tempData = e.temp;
      this.tempData = this._.get(e, 'tempData', null);
      this.tempList = this._.get(e, 'tempList', []);
      this.useList = this._.has(e, 'tempList');
    });
  },
};
</script>

<style scoped lang="less"></style>
